| Al
entrar a Fireworks nos encontramos, más o menos (puede variar
de acuerdo la la configuración que le dé el usuario),
con la siguiente pantalla: |
 |
 Ahora
nos toca definir el área de trabajo, que en este caso llamamos
"lienzo" (canvas), así que vamos a Archivo(File)>Nuevo(New),
y nos aperece esta ventana, que sirve para configurarla:
|
En ella se
nos dan las opciones para determinar el ancho (width) y el
alto (heigh) del lienzo; la resolución (que en el
caso de diseño web, se suele determinar en 72 pixels); y
el sistema de medidas que queremos utilizar: pixels, pulgadas (inches),
o centímetros. Nosotros utilizaremos pixels, por ser el sistema
más utilizado en medidas para diseño web.
En la misma ventana podemos ver, además, las opciones para
determinar el color que llevará el "lienzo" o area
de trabajo.
Pero es de notar que, aunque definamos un color determinado, aun
nos da la opción de utilizarlo de color blanco, o transparente.
Una vez definidas las propiedades del lienzo, ya estamos listos
para trabajar. |
| Por empezar,
fijémonos que a la izquierda o en algún lugar de la
pantalla, encontramos la siguiente "caja de herramientas": |
 |
 |
Son 37 herramientas,
algunas de las cuales cambian según lo que se trabaje: dibujos
o pixeles.
En la tabla siguiente, sacada del manual oficial de Fireworks, se
describen las funciones básicas de cada herramienta en cada
modo: |
1-
Dibuje un rectángulo con la herramienta correspondiente.
2- Ventana (Window)>Objeto (Object). O Alt+F2
3- Le aparecerá
una ventana como esta, la de "Objeto":
En esta ventana Ud. tiene opciones para darle un determinado ángulo
de "redondeado" (roundness) a las puntas del rectángulo,
y para poner el trazo, hacia adentro, centrado, o hacia afuera con
respecto al objeto (stroke). |
 |
Si
va a dibujar un polígono  ,
le aparecerán las opciones para elegir duántos lados
(sides) quiere que este tenga. Y fíjese que la opción
Angulo (angle) está deshabilitada; pues bien, esta se habilita
cuando elegimos la forma de estrella dentro de "shape". |
 |
| En
la forma de estrella (star), los "slides" pasan a ser
la cantidad de puntas que tendrá la estrella, y el "angle"
será el ángulo de apertura que tendrán las
puntas de la estrella. |
 |
Otras
herramientas de trazado:
Lápiz
 : es para
dibujar a mano alzada.
El trazo abierto se finaliza normalmente en cualquier lugar. El
trazo cerrado, se finaliza en el mismo lugar donde se empezó.
A la figura resultante se le puede dar relleno. |
Pincel  :
La herramienta Pincel permite pintar pinceladas de estilo libre,
mientras que la herramienta Lápiz dibuja trazos de lápiz
de un píxel. |
Pluma
 : Sirve para
realizar trazados segmento por segmento. Los nodos resultantes en
este trazado, poseen sub-nodos que ayudan a la modificación
en la curva de alguno de esos segmentos. |
El trazado,
color, efecto y otras características, son modificables desde
la ventana de trazado (stroke). Practique con algunas de las posibilidades
que le brinda, pero tome en cuenta que efectos tales como "texture",
sólo son visibles cuando el trazo es bastante grueso.
 |
Tanto
las imágenes creadas con las herramientas de dibujo, como
los trazos cerrados creados con las herramientas de trazo, pueden
ser modificadas desde las ventanas de Relleno y Borde (Fill y
Stroke) a las que se accede desde el menú ventana (Window).
|
|
Edición
y remodelado de trazados editando los puntos:
Algunos puntos
sobre este tema, sacados del manual oficial de Fireworks: "Los
puntos son la estructura de los objetos de trazado en Fireworks.
Cuando se dibuja en el modo de objetos con cualquier herramienta
de dibujo de Fireworks, el trazado de resultado se definirá
por los puntos especificados al dibujar. El tipo de punto y el
aspecto curvo o recto de las líneas adyacentes están
relacionados directamente:
|
-
Un punto curvo indica que los segmentos adyacentes son curvos y
se mantienen transiciones suaves y regulares entre segmentos.
|
 |
-
Un punto de esquina indica que al menos uno de los segmentos adyacentes
es una línea recta. |
 |
|
Las dos herramientas
más convenientes para realizar la modificación de
los trazados mediante la edición de puntos, son las de
Pluma
y Nivel inferior  .
Edición
y remodelado de imágenes:
 Las
imágenes aparecen seleccionadas por defecto con una delgada
línea azul. Haciendoclic en cualesquiera de sus nodos con
la herramienta de Selección  ,
podemos distorsionar el tamaño, aunque no su forma. Pero
si queremos cambiar el tamaño conservando las
proporciones, debemos utilizar la herramienta Escalar  ,
pero tome en cuanta que estas proporciones se conservarán
SÓLO si trabaja con los nodos de las esquinas de la imagen,
no los de los lados.
|
 Al
utilizarla, la imagen aparece seleccionada como muestra la figura.
La imagen azul es la original, mientras que el borde punteado que
sobresale, muestra el aumento de tamaño que se está
ejecutando, pero, nótese, este aumento es de modo PROPORCIONAL,
tanto vertical como horizontalmente, siempre y cuando los cambios
se hagan pinchando en los nodos de las esquinas.
|
 Otra
de las opciones que da la herramienta de escalar, es la de girar
el objeto. Esto se consigue cuando se coloca el mouse entre dos
nodos de la figura, y el cursor adopta la forma de una curva de
giro. |
 En
el único caso en que se pueden cambiar tanto el tamaño
como la FORMA original de las imágenes, es en el de las dibujadas
mediante las herramientas de dibujo, y con la herramienta Nivel
inferior
pinchando en
alguno de los nodos de la imagen. En la imagen de la izquierda se
puede ver un "ex-cuadrado", modificado de este modo. |
|
Importar
imágenes:
1-
Menú Archivo (File)> Importar (Import).
O bien el botón Importar (import)  ,
en la barra superior de herramientas
2- Seleccionar la imagen que se va a importar.
3- OK o Aceptar.
Las imágenes se insertan con su tamaño y peso original.
En caso que el tamaño del lienzo (canvas) difiera con el
de la imagen porque la imagen es más pequeña, podemos
arreglar esta diferencia mediante el comando Recortar (Trim
canvas) del menú Modificar (Modify). Si en cambio
la imagen insertada es más grande que el tamaño
del lienzo, podemos usar la opción Fit Canvas. Ambas
opciones adaptan el lienzo al tamaño de la imagen.
En caso que las imágenes deban ser insertadas desde un
Scanner, es aconsejable determinar la resolución en 200
dpi, y no en 72, como es común para resolución web,
ya que de esta manera se obtiene INICIALMENTE una imagen de buena
calidad, la que después puede ser optimizada para web.
Efectos:
Son
aplicables tanto a las imágenes realizadas con las herramientas
de dibujo, como a aquellas que insertamos desde fuera de Fireworks.
Para aplicarlos debemos tener, primeramente, seleccionada la imagen
a la que queremos aplicarlos, y luego ir al menú Ventana(Window)>
Efectos(Effect). Entonces aparecerá esta ventana:
|
En
principio aparece sin ningún efecto seleccionado.
 |
Pero
al desplegar el menú aparecerán las opciones para
optar por alguno de ellos, o por los efectos que se utilizan por
defecto (use defaults)
. |
 Otra
de las opciones para aplicar efectos es la de utilizar la "Librería
de estilos", que se activa mediante el menú Ventana
(Window), y luego Estilos (Styles). |
|
 Fireworks
también le da la posibilidad de crear sus propios estilos
e incorporarlos a la lista de los que ya existen.
Para eso debe partir de una imagen existente a la que Ud. le haya
aplicado los distintos efectos y estilos que quiera incorporar.
1- Seleccionar
la imagen.
2- Haga clic en el botón Estilo Nuevo (New
Style) de la ventana de estilos:
|
 Aparecerá
la ventana de Estilo nuevo, en la que Ud. podrá elegir
las propiedades que el nuevo estilo tomará de su imagen,
y el nombre que tendrá este nuevo estilo. |
|
Optimización
y exportación de gráficos simples:
Para
la primera parte de este trabajo nos manejamos básicamente
con dos elementos que nos da Fireworks: las opciones de previsualización
(preview), y las opciones de optimización.
Tenemos hasta
cuatro opciones de previsualización. De ellas, elegimos la
que nos parezca más apta como producto final.
Las opciones
que aparecen en cada uno de los "preview" nos señalan:
el tipo de archivo (en este caso es un JPG); el peso de la imagen;
y el tiempo que tardaría en bajar mediante un módem
de 28.8kbps. Se utliza a propósito esta referencia de un
módem lento, para darnos una idea de lo que tardaría
nuestra imagen en una mala conexión. Y es un buen estándar
de prueba, pues nos obliga a tratar de bajar el tamaño de
las imágenes al máximo posible. Si nos diesen como
pará metro un a conexión de cable o fibra óptica,
estaríamos diseñando sólo para el mercado de
usuarios conconexiones rápidas, y, sabemos todos, estos no
son la mayoría. |
La segunda parte de la optimización se realiza en la ventana
correspondiente, a la que accedemos mediante Ventana (Window)
> Optimizar (Optimize). El primer menú con que
no encontramos, nos da opciones para configurar la imagen de acuerdo
a distintos parámetros gráficos. Nótese que
la mayoría no hacen referencia a formatos aptos para web,
sino para gráfica, y hasta para definir la imagen como
gif animado antes de exportarla.
|
El segundo nos da a optar por varias paletas, según se vaya
a exportar según la configuración de color del monitor
del usuario, para Web; baja calidad en Web, Macintosh, escala de
grises, blanco y negro, etc. |
El tercero es propiamente "settings", o sea, el "seteo"
o "configuración" de la imagen, pero esta vez con
parámetros más aptos para Web. |
|
Por ahora, estos son los conocimientos básicos que nos
sirven para exportar adecuadamente una imagen. Bastaría
agregar las opciones que aparecen cono 1
y 2.
La 1 sirve para guardar un
seteo particular como un estilo más que podemos volver
a aplicar en otra imagen; y la 2
para borrar alguno que ya tengamos guardado.
|
| Una
vez optimizada la imagen, sólo falta exportarla a la carpeta
que tengamos designada a tal efecto. Para eso vamos a ir al menú
Archivo (File)> Exportar (Export), o directamente
al botón Exportar de la barra de herramientas superior. Luego
seleccionamos la carpeta donde queremos guardar el archivo, le ponemos
un nombre, y finalmente aceptar. |
|
y formas básicas
Inicialmente tenemos esta imagen:
La misma imagen con "Outer bevel" (puse el efecto en otro color para que se note).
La misma imagen con "Inner bevel"
La misma imagen con "drop shadow" ( la típica "sombra").
La misma imagen con "Glow" (nuevamente el efecto en otro color)
